import React, { useEffect, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import { Grid, SearchBar, Avatar } from "antd-mobile";

// Import Swiper styles
import "swiper/css";
import "swiper/css/effect-cards";

import "./index.scss";

// import required modules
import { EffectCards } from "swiper";
import { BannerType } from "../../type/course";
import { bannerGet } from "../../api/course";
import Course from "../../components/course";
import { useUserStore } from "../../store/user";
import { usePlayerStore } from "../../store/player";
export interface ITodayProps {}
function getImageUrl(index: number) {
  return new URL(`../../assets/img/ic_today_${index + 1}.png`, import.meta.url)
    .href;
}
export default function Today(props: ITodayProps) {
  const [banner, setBanner] = useState<BannerType[]>([]);
  const { userInfo } = useUserStore((state) => state);
  const gridData = ["专注闹钟", "呼吸训练", "睡眠助手", "解压木鱼"];
  const { toggleShow, changePopData } = usePlayerStore((state) => state);
  useEffect(() => {
    bannerGet().then((res) => {
      setBanner(res.data.results);
    });
  }, []);
  return (
    <div className="today-cont ">
      <div className="user">
        <div>
          <h1>加入NiceDay</h1>
          <p>
            {userInfo ? `当前访问账号：${userInfo.username}` : "注册或登录账号"}
          </p>
        </div>
        <Avatar src={userInfo && userInfo.avatar ? userInfo.avatar : ""} />
      </div>
      <div className="search-cont">
        <SearchBar placeholder="点swiper体验播放器、点列表文字访问详情" />
      </div>
      <Swiper
        effect={"cards"}
        grabCursor={true}
        modules={[EffectCards]}
        className="mySwiper"
      >
        {banner.map((item) => {
          return (
            <SwiperSlide
              onClick={() => {
                toggleShow(true);
                changePopData(item);
              }}
            >
              <img src={item.img} alt="" />
            </SwiperSlide>
          );
        })}
      </Swiper>
      <Grid columns={4} gap={8} className="my-grid-item">
        {gridData.map((item, index) => {
          return (
            <Grid.Item>
              <img src={getImageUrl(index)} alt="" />
              <div>{item}</div>
            </Grid.Item>
          );
        })}
      </Grid>
      <Course />
    </div>
  );
}
